<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>waterfall-分页无限加载</title>
    <style>
        body {
            margin: 0;
            position: relative;
            width: 100vw;
        }

        img {
            width: calc(50% - 20px);
            margin: 10px;
            float: left;
        }

        #modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100vw;
            height: 100vh;
            display: flex;
            justify-content: center;
            align-items: center;
            background-color: black;
        }

        #modal>div {
            position: absolute;
            display: flex;
            justify-content: center;
            align-items: center;

        }

        #modal>div:nth-child(1) {
            top: 40vh;
            left: calc( 50vw - 10vh);
            background-color: white;
            width: 20vh;
            height: 20vh;
            animation: move 3s infinite;
            animation-fill-mode: both;
            border-radius: 50%;
        }

        #modal>div:nth-child(2) {
            font-size: 2.5vh;
            
        }

        @keyframes move {
            from {
                font-size: 5vh;
                opacity: 0;
                transform: rotateY(-720deg);
            }

            1% {
                font-size: 5vh;
                opacity: 1;
            }

            99% {
                font-size: 5vh;
                opacity: 1;
            }

            to {
                font-size: 5vh;
                opacity: 0;
            }
        }
    </style>
</head>

<body>
    <div id="main"></div>
    <div id="modal">
        <div></div>
        <div>loading</div>
    </div>
    <script src="https://cdn.bootcdn.net/ajax/libs/vConsole/3.3.4/vconsole.min.js"></script>
    <script>
        var vConsole = new VConsole();
        console.log('Hello world');

        var cols = 2;//列数（自行计算）
        var itemWidth = window.screen.width / 2; // 实际图片显示宽度
        var page = 0;//分页加载
        var heightArr = []; // 图片高度数组
        var waibian = 20;//外边框宽度

        window.onload = function () {
            waterfall();
        }

        window.onscroll = function (e) {
            var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
            var clientHeight = document.documentElement.clientHeight || document.body.clientHeight;
            var scrollHeight = document.documentElement.scrollHeight || document.body.scrollHeight;
            console.log('scrollTop:' + scrollTop, 'clientHeight:' + clientHeight, 'scrollHeight:' + scrollHeight)
            if (scrollHeight > clientHeight && scrollTop + clientHeight >= scrollHeight - 10) {
                waterfall();
            }
        }

        function waterfall() {
            ++page;
            var onloadImgs = [];//已经加载的图片（未显示）
            var imgObj = getImgs();
            for (var i = 0; i < imgObj.length; i++) {
                (function (i) {
                    var img = new Image();
                    img.src = imgObj[i];
                    img.onload = img.onerror = function () {
                        onloadImgs.push(img);
                        handleImgs();
                    }
                })(i);
            }
            // 处理已经加载的图片
            function handleImgs() {
                // console.log(onloadImgs)
                if (onloadImgs.length == imgObj.length) {
                    for (var i = 0; i < onloadImgs.length; i++) {
                        console.log('heightArr', heightArr)
                        if (page == 1 && i < cols) {
                            console.log(i)
                            // 第一排
                            heightArr[i] = (itemWidth - waibian) * onloadImgs[i].height / onloadImgs[i].width + waibian;//第一排高度追加
                            onloadImgs[i].style.position = 'absolute';
                            onloadImgs[i].style.left = i == 0 ? '0px' : itemWidth + 'px';
                            onloadImgs[i].style.top = '0px';
                        } else {
                            console.log(i)
                            //获取数组中的最小值
                            var minHeight = null;
                            var minIndex = null;
                            for (var j = 0; j < heightArr.length; j++) {
                                if (j == 0) {
                                    minHeight = heightArr[j];
                                    minIndex = j;
                                } else {
                                    if (heightArr[j] < minHeight) {
                                        minHeight = heightArr[j];
                                        minIndex = j;
                                    }
                                }
                            }
                            heightArr[minIndex] += (itemWidth - waibian) / onloadImgs[i].width * onloadImgs[i].height + waibian;//高度追加
                            onloadImgs[i].style.position = 'absolute';
                            onloadImgs[i].style.left = minIndex * itemWidth + 'px';
                            onloadImgs[i].style.top = minHeight + 'px';
                        }
                        document.getElementById('modal').style.display='none';
                        document.getElementById('main').appendChild(onloadImgs[i]);
                    }
                }
            }
        }

        function getImgs() {
            var list = [
                'https://cdn.pixabay.com/photo/2015/10/21/03/44/beach-998788_960_720.jpg',
                'https://cdn.pixabay.com/photo/2020/06/08/22/10/couple-5276245_960_720.jpg',
                'https://cdn.pixabay.com/photo/2020/06/11/21/25/imp-5288348_960_720.jpg',
                'https://cdn.pixabay.com/photo/2020/06/10/01/32/cumulonimbus-5280578_960_720.jpg',
                'https://cdn.pixabay.com/photo/2020/06/06/04/16/table-5265190_960_720.jpg',
                'https://cdn.pixabay.com/photo/2016/03/26/13/09/notebook-1280538_960_720.jpg',
                'https://cdn.pixabay.com/photo/2020/06/08/05/28/vortex-5273023_960_720.png',
                'https://cdn.pixabay.com/photo/2020/06/03/16/30/wave-5255593_960_720.jpg',
                'https://cdn.pixabay.com/photo/2020/05/28/08/00/girl-5230306_960_720.jpg',
                'https://cdn.pixabay.com/photo/2020/06/10/09/19/cake-5281948_960_720.jpg',
            ]
            return list;
        }

    </script>
</body>

</html>